<template>
  <jl-base>
    <jl-header>
      <mt-header title="客户要货单" :fixed="true">
        <i slot="right">
          <mt-button @click="goDrafts">草稿箱</mt-button>
          <mt-button @click="make">新增</mt-button>
        </i>
      </mt-header>
    </jl-header>

    <jl-content>
      <div class="list_search_header">
        <input placeholder="搜索合同编号，客户名称等，可模糊搜索" v-model="condition">
        <span @click="search">搜索</span>
      </div>

      <div class="qd_list" v-infinite-scroll="loadMore"
           :infinite-scroll-disabled="loading"
           :infinite-scroll-distance="10">
        <mt-loadmore :top-method="loadTop" ref="loadmore" :topDistance="50">
          <template v-for="item in list">
            <div class="qd_item">
              <div class="qd_header bor_bottom">
                <div class="w12 qd_address">
                  <em class="mr5">已审核</em>{{ item['LXR'] }} - {{item['LXFS']}}
                </div>
                <div class="w12 mt10">
                  <span class="w08 mt10 tl"><i class="fa fa-file-text mr5"></i>{{ item['JLWBDH'] }}</span>
                  <span class="w04 mt10 tr"><i class="fa fa-clock-o mr5"></i>{{ item['ZDRQ'] }}</span>
                  <span class="w06 mt10 tl"><i class="fa fa-user-circle-o mr5"></i>{{ item['ZDR'] }}</span>
                  <span class="w06 mt10 tr">{{ item['XSFS'] }}</span>
                </div>
                <div class="w12 mt10"><span class="fl" style="color: black;!important;">商品列表:</span></div>
                <div class="w12 mt10" v-for="i of item.SPLB">
                  <span class="w08  tl">{{i['SPBM']}}-{{i['SPMC']}}</span>
                  <span class="w02  tr">{{i['YHDJ'] |money}}</span>
                  <span class="w02  tr">x{{i['YHSL']}}</span>
                </div>
              </div>
            </div>
          </template>
        </mt-loadmore>
        <jl-bottom-loading :class="{'false':'hide'}[loading]"/>
      </div>

      <div class="tips_no_pro" v-if="this.list.length <=  0">
        <div class="tips_no_main">
          <div class="w12 tc font_gray_ccc" style="font-size:50px;"><i class="fa fa-sticky-note-o"></i></div>
          <div class="w12 tc font_size_super mt20 font_gray_ccc">暂无记录</div>
        </div>
      </div>

    </jl-content>
    <jl-footer>

    </jl-footer>
  </jl-base>
</template>

<script>

  export default {
    data() {
      return {
        list: [],
        loading: false,
        page_num: 1,
        isEnd: false,
        condition: ''
      }
    },
    methods: {
      loadMore() {
        if (this.isEnd) return
        this.loading = true
        this.page_num++
        this.searchEngineerContract()
      },
      search() {
        this.page_num = 1
        this.list = []
        this.searchEngineerContract();
      },
      searchEngineerContract() {
        this.$engineer.searchCustomerNeed({page_num: this.page_num, condition: this.condition})
          .then(v => {
            this.isEnd = false;
            let list = v['list'] || [];
            if ($Utils.isNull(list)) this.isEnd = true;
            Array.prototype.push.apply(this.list, list);
            this.loading = false;

            this.$forceUpdate()
          })
          .catch(e => {
            this.loading = false
          })
      },
      make() {
        this.$router.push('/agent/customerNeed/new');
      },
      goDrafts() {
        this.$router.push("/agent/customerNeed/drafts")
      },
      loadTop() {
        this.page_num = 1
        this.$engineer.searchCustomerNeed({page_num: this.page_num})
          .then(v => {
            let list = v['list'] || [];
            if ($Utils.isNull(list)) this.isEnd = true;
            this.list = {...{}, ...list};
            this.loading = false;
            this.$refs.loadmore.onTopLoaded();
            this.$forceUpdate()
          })
          .catch(e => {
            this.loading = false
          })
      }
    },
    activated() {
      this.isEnd = true;
      this.list = [];
      this.searchEngineerContract()
    }
  }
</script>

<style scoped>

</style>
